<template>
	<Layout :class="'bg-white p-2'">
		<Row class="p-1">
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.warehouseName" placeholder="请输入仓库" />
			</Col>
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.productName" placeholder="请输入产品名称" />
			</Col>
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.userName" placeholder="请输入仓库管理员" />
			</Col>
			<Col class="p-1" span="4">
			<Button id="bianju"  type="primary" @click="searchs">查询</Button>
			</Col>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				searchKey : {
					warehouseName : "",
					productName : "",
					userName : "",
					storeId : "",
					current:1,
					size:10
				},
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "产品编号",
							key: "productId",
							align: 'center',
							width:128
						},
						{
							title: "产品姓名",
							key: "productName",
							align: 'center',
							width:130
						},
						{
							title: "产品数量",
							key: "num",
							align: 'center',
							width:130
						},
						{
							title: "产品类别",
							key: "type",
							align: 'center',
							width:130
							
						},
						{
							title: "仓库名",
							key: "warehouseName",
							align: 'center',
							width:130
							
						},
						{
							title: "仓库管理员",
							key: "userName",
							align: 'center',
							width:130
							
						},
						{
							title: "仓库地址",
							key: "address",
							align: 'center',
							width:130
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			searchs: function() {
				this.searchKey.current = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/stock/page",
					param: this.searchKey
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				console.log(data)
				});
			},
			pageSearch: function(changedPage) {
				this.searchKey.current = changedPage;
				this.search();
			}
		},
		created: function() {
			// this.searchKey.storeId = ;    //从本地缓存获取门店ID存到storeId里
			this.init();
		}
	}
</script>

<style>
		#bianju{
		
			margin-left: 200%;
		}
 
</style>
